<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
    <title>计数器案例</title>
</head>

<body>
    <button id="plus">+ 加</button>
    <span id="count">0</span>
    <button id="minus">- 减</button>
    <script src="./redux.min.js"></script>
    <script>
        // 3.储存默认状态
        let initialState = {
            count: 0
        }
        // 2.创建reducer 函数 这里返回什么 store 就储存什么
        // action 就是 reducre 的第二个参数
        // 第一个参数为初始值，第二个参数为 action对象
        function reducer(state = initialState, action) {
            switch (action.type) {
                case 'increment':
                    return {
                        count: state.count + 1
                    };
                case 'decrement':
                    return {
                        count: state.count - 1
                    };
                default:
                    return state
            }
        }

        // 1.创建 store 对象，第一个参数接收一个函数
        let store = Redux.createStore(reducer)

        // 4.定义 action
        let increment = {
            type: 'increment'
        }
        let decrement = {
            type: 'decrement'
        }
        // 5.获取按钮 给按钮添加点击事件
        document.getElementById('plus').onclick = function () {
            //6. 触发 action，就会被 reducer接收
            store.dispatch(increment)
        }
        document.getElementById('minus').onclick = function () {
            //6. 触发 action，就会被 reducer接收
            store.dispatch(decrement)
        }

        // 7. 订阅 store
        // 当 store  状态发生改变的时候，就会调用传入的函数
        store.subscribe(() => {
            // 获取 store 对象中储存的状态
            console.log(store.getState())
            document.getElementById('count').innerHTML = store.getState().count
        })
    </script>
</body>

</html>